import React, { useEffect } from 'react'
import { Tabs, List, Image, Button } from 'antd-mobile'
import { fetstTagAllList } from '../../store/tag/tagReducer'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../store'
import withLogin from '../../components/withLogin'
import FocusTag from '../../components/focusTag'
const Index: React.FC = () => {
	const dispatch = useDispatch();
	const tag = useSelector((state: RootState) => state.tagReducer.tag)

	const focusTag = useSelector((state: RootState) => state.tagReducer.focusTag)

	useEffect(() => {
		dispatch(fetstTagAllList() as any)
	}, [])
	return (
		<div>
			<Tabs>
				<Tabs.Tab title="全部标签" key={1}>
					<List>
						{
							tag.length > 0 && tag.map(v => {
								return (
									<List.Item
										key={v.id}
										prefix={<Image
											src={v.url}
											lazy
											width={50}
											height={50}
											fit="fill"
										/> }
										title={ v.title }
										description={ 
										<b>订阅人数{ v.focus }万人-阅读量{v.message}人</b> }
										extra={ <Button color='primary'>关注</Button> }
									></List.Item>
								)
							})
						}
					</List>
				</Tabs.Tab>
				<Tabs.Tab title="关注标签" key={2}>
					{ withLogin(FocusTag) }
				</Tabs.Tab>
			</Tabs>
		</div>
	)
}


export default Index